﻿@media all
{
    
    body
    {
        background: #333 url(../../Content/themes/base/Images/background2.jpg) repeat;
        font-size: 75%;
        font-family: Verdana, Tahoma, Arial, "Helvetica Neue", Helvetica, Sans-Serif;
        margin: 0;
        padding: 0;
        color: #696969;
        text-shadow: 0.1em 0.1em 0.2em black;
    }

    h1
    {
        margin-top: 40px;
        text-align: center;
    }

    #container
    {  
        margin-left: 5%;
        margin-right: 5%;
        margin-bottom: 30px;    
    }

    #search #searchValue
    {
        padding-left: 20px;
        padding-right: 20px;
        background-color: #1C1C1C;
        color: White;
        -webkit-border-radius: 5px; 
        -moz-border-radius: 5px; 
        border-radius: 5px; 
        padding-top: 5px;
        width: 50%;
    }

    #search #searchButton2
    {   
        background: white url(../../Content/themes/base/images/search.jpg) no-repeat top ;
        width: 40px;
        height: 40px;
        color:white;
        -webkit-border-radius: 100px; 
        -moz-border-radius: 100px; 
        border-radius: 100px; 
        padding-bottom: 15px;    
    }

    #menu a
    {
        border-bottom: ridge #6E6E6E 5px;
        border-top: ridge #6E6E6E 5px;
        border-radius: 20px;
        color: white;
        text-shadow: 0.1em 0.1em 0.2em black;
        font-weight: bold;
        text-align: center;
        padding-top: 8px;
        padding-bottom: 8px;
        text-decoration: none;
        margin: 5px;
        padding-right: 5%;
        padding-left: 5%;
    
   
        background-image: linear-gradient(bottom, rgb(106,108,117) 25%, rgb(64,64,71) 63%);
        background-image: -o-linear-gradient(bottom, rgb(106,108,117) 25%, rgb(64,64,71) 63%);
        background-image: -moz-linear-gradient(bottom, rgb(106,108,117) 25%, rgb(64,64,71) 63%);
        background-image: -webkit-linear-gradient(bottom, rgb(106,108,117) 25%, rgb(64,64,71) 63%);
        background-image: -ms-linear-gradient(bottom, rgb(106,108,117) 25%, rgb(64,64,71) 63%);

        background-image: -webkit-gradient(
	        linear,
	        left bottom,
	        left top,
	        color-stop(0.25, rgb(106,108,117)),
	        color-stop(0.63, rgb(64,64,71))
        );
    
    }

    #menu a:hover
    {
        font-weight: normal;
    }
    
    #sortSongs
    {
        float: right;
        margin-top: -10px;
        padding-left: 10px;
        background: #1C1C1C;
        color: White;
        -webkit-border-radius: 5px; 
        -moz-border-radius: 5px; 
        border-radius: 5px; 
    }
    #songInfo li
    {
        list-style-type:none;
    }
    #songInfo li a
    {
       font-size: 15px;
       text-decoration: none;
       font-weight: bold;
       color: #999999;
       margin-top: 5px; 
    }
    
    
    #songInfo li a:hover
    {
        font-weight: normal;
    }
    
    .playlistDropDown
    {
        float: right;
        margin-top: -10px;
        padding-left: 10px;
        background: #1C1C1C;
        color: White;
        -webkit-border-radius: 5px; 
        -moz-border-radius: 5px; 
        border-radius: 5px; 
    }
    .removePlaylist 
   {
       margin-left: 20px;
       float:right;
       margin-bottom: 20px;
       
   }
    .play
    { 
        float: left;
        clear: both;
        margin-bottom: 20px;
        
    }
    ul#songList
    {
       background-color: rgba(144, 144, 144, 0.3); 
    }
    
  
    #createPlaylist
    {
        margin-top: 10px;
        /*float: left;*/
        text-decoration: none;
       font-weight: bold;
       color: White;
       font-size: 11px;
      
    }
    #createPlaylist:hover
    {
        font-weight: normal;
    }
   ul#songList li
   {
       list-style-type:none;
       padding-top: 15px;
       padding-bottom: 5px;
       border-bottom: 1px solid white;
       
   }
   ul#songList li span
   {
       display: block;
   }
   
   ul#songList li span a
   {
       text-decoration: none;
       font-weight: bold;
       color: #999999;
       font-size: 11px;
       margin-top: 5px;
   }
   ul#songList li span a:hover
   {
       font-weight: normal;
   }
   
   
   
   
    footer
    {
        background-color: rgb(42,42,42);
        color: #999;
        text-align: center;
        line-height: normal;
        margin: 0;
        font-size: 1.2em;
        margin-bottom: 0;
        padding-bottom: 0;
        bottom:0;    
        width: 100%;
        position: fixed;   
    }
    

}

/*Ipad and Iphone*/
@media screen and (max-width: 1050px)
{
    #search
    {
        max-width: 100%;
        padding-top: 45px;
        text-align: center;
    }

    #menu
    {
        max-width: 100%;
        margin-top: 60px;
        text-align: center;
        padding-right: 30px;
    }
    #menu a
    {
        max-width: 15%;
    }
}

/*Laptop*/
@media screen and (min-width: 1051px) 
{
    #search
    {
        max-width: 100%;
        margin-top: 15px;
        margin-bottom: -10px;
        margin-right: 30px;
        text-align: center;
    } 

    #container-2
    {
        margin-top: 5%;  
    }
    #menu
    {
        float: left;
        max-width: 30%;
        min-width: 20%; 
        margin-top: 2%;
    }

    #menu a
    {
        max-width: 100%;
    display: block;
    
    }

    #songInfo
    { 
        float: left;
        max-width: 35%;
        min-width: 25%;
        margin-left: 5%;
        color: White;
        margin-top: 23px;
    }
    
    

    #musicPlayer
    {
        float: left;
        max-width: 25%;
        min-width: 15%;
        margin-left: 5%;
        margin-top: 35px;
    }
}

/*Ipad*/
@media screen and (min-width: 701px) and (max-width: 1050px)
{
    #songInfo
    { 
        margin-top: 10.5%;
        float: left;
        max-width: 45%;
        min-width: 35%;
        margin-left: 5%;
        color: White;
    }
    #musicPlayer
    {
        margin-top: 12%;
        float: left;
        max-width: 45%;
        min-width: 35%;
        margin-left: 5%;
    }
}

/*Iphone*/
@media screen and (max-width: 700px)
{
  
    #songInfo
    {
        margin-top: 15%;
        padding-top: 20px;
        max-width: 100%;
        min-width: 90%;
        color: White; 
        margin-left: 40px;
   
    }

    #musicPlayer
    {
        margin-top: 3%;
        float: left;
        max-width: 100%;
        min-width: 90%;
        margin-left: 5%;
    } 
}

.songLinks
{
    text-align:right;
}

.addToPlaylist
{
    text-decoration: none;
    font-weight: bold;
    color: #999999;
    font-size: 11px;
    margin-top: 5px;
}
  
.removeSong
{
    text-decoration: none;
    font-weight: bold;
    color: #999999;
    font-size: 11px;
    margin-top: 5px;
}    

.addToPlaylist:hover
{
    font-weight: normal;
}
  
.removeSong:hover
{
    font-weight: normal;
} 

#errorMessages
{
    text-align: center;
}